@charset "UTF-8";
//命名空间:btnA

$btnA_BaseClass:                btnA; //按钮的基本class
$btnA_FormBaseClass:            btnA_form !default; //form中input和button元素按钮的class
$btnA_DefaultSize:              16px 28px 14px 3px !default; //默认按钮的左右padding，高度，字体大小，圆角
$btnA_BlockDefaultSize:         30px 38px 19px 3px !default; //默认按钮的左右padding，高度，字体大小，圆角
$btnA_BgGradientSwitch:         true !default; //是否启用渐变背景


// btn common style
// 按钮基本样式，联合申明
%btn-basic{
  @include inline-block;
  cursor: pointer;
  text-align:center;
  border:0 none;
}

//按钮大小 formbtn 表单按钮样式高度为line-height 默认为false
@mixin btn-size($padding: nth($btnA_DefaultSize,1), $height: nth($btnA_DefaultSize,2), $fontSize: nth($btnA_DefaultSize,3), $borderRadius: nth($btnA_DefaultSize,4), $formBtn: false) {
  padding: 0 $padding;
  font-size: $fontSize;
  border-radius: $borderRadius;
  @if $formBtn{
    // form元素按钮（如button,input:submit），设置height来反应其高度
    height: $height;
  } @else{
    // 普通按钮，通过设置line-height来反应其高度
    line-height: $height;
  }
}

//按钮block
@mixin btn-size-block($padding: nth($btnA_BlockDefaultSize,1), $height: nth($btnA_BlockDefaultSize,2), $fontSize: nth($btnA_BlockDefaultSize,3), $borderRadius: nth($btnA_BlockDefaultSize,4), $formBtn: false) {
  display: block;
  padding: 0 $padding;
  font-size: $fontSize;
  border-radius: $borderRadius;
  @if $formBtn{
    // form元素按钮（如button,input:submit），设置height来反应其高度
    height: $height;
  } @else{
    // 普通按钮，通过设置line-height来反应其高度
    line-height: $height;
  }
}

//按钮背景渐变
@mixin btn-gradient-vertical( $startColor:rgba(255,255,255,0.3),$endColor:rgba(255,255,255,0) ){

  @include gradient-vertical($startColor,$endColor);
  @if $filter{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}',GradientType=0 ); /* IE6-8 */
    :root &{
      @extend %reset-filter;
    }
  }

}

//按钮皮肤
//包括按钮背景，文本色，边框, 开始渐变色, 结束渐变色
@mixin btn-skin( $bgColor:#e6e6e6, $textColor:#333,$borderWidth:1px, $borderStyle:solid, $borderColor: darken($bgColor, 5%), $startColor:rgba(255,255,255,0.3), $endColor:rgba(255,255,255,0), $btnA_BgGradientSwitch:true ){
  color: $textColor;
  background-color: $bgColor;
  border-width: $borderWidth;
  border-style: $borderStyle;
  border-color: $borderColor;

  //如果设置背景渐变
  @if $btnA_BgGradientSwitch{
    border-color:lighten($bgColor, 2%) darken($bgColor, 5%) darken($bgColor, 5%) lighten($bgColor, 2%);
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5) inset, 0 0 1px rgba(255, 255, 255, 0.5) inset;
    @include btn-gradient-vertical();
  }

  &:hover{
    background-color: lighten($bgColor, 3%);
    color:$textColor;
  }

  &:active{
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
    background-color: $bgColor;
    color: $textColor;
    background: desaturate($bgColor, 20%);
    color: darken($textColor,20%);
  }

}

.#{$btnA_BaseClass}.disabled,
.#{$btnA_BaseClass}.disabled:hover,
.#{$btnA_BaseClass}.disabled:focus,
.#{$btnA_BaseClass}.disabled:active,
{
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 0px #fff;
  @include opacity(80);
  background: #EEE;
  border: 1px solid #DDD;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
  color: #CCC;
  cursor: default;
  -webkit-appearance: none;
}

// 两种类别按钮，普通的和form表单元素的
//----------------------------------
.#{$btnA_BaseClass}{
  @extend %btn-basic;
  @include btn-size();
  @include btn-skin($btnA_BgGradientSwitch:false);
}

.#{$btnA_FormBaseClass}{
  @extend %btn-basic;
  @include btn-size($formBtn:true);
  @include btn-skin();
}

.#{$btnA_BaseClass}-caution{
  @extend %btn-basic;
  @include btn-size();
  @include btn-skin( $bgColor:#e54028, $textColor:#fff, $startColor:#e8543f, $endColor:#d9331a);
}

.#{$btnA_BaseClass}-highlight{
  @extend %btn-basic;
  @include btn-size();
  @include btn-skin( $bgColor:#f18d05, $textColor:#fff, $startColor:#fa9915, $endColor:#d87e04);
}

.#{$btnA_BaseClass}-primary{
  @extend %btn-basic;
  @include btn-size();
  @include btn-skin( $bgColor:#00a1cb, $textColor:#fff, $startColor:#00b5e5, $endColor:#008db2, $btnA_BgGradientSwitch:false);
}

.#{$btnA_BaseClass}-action{
  @extend %btn-basic;
  @include btn-size();
  @include btn-skin( $bgColor:#7db500, $textColor:#fff, $startColor:#8fcf00, $endColor:#6b9c00, $btnA_BgGradientSwitch:false);
}

.#{$btnA_BaseClass}-royal{
  @extend %btn-basic;
  @include btn-size();
  @include btn-skin( $bgColor:#87318c, $textColor:#fff, $startColor:#99389f, $endColor:#752a79, $btnA_BgGradientSwitch:false);
}


.#{$btnA_BaseClass}-block-caution{
  @extend %btn-basic;
  @include btn-size-block();
  @include btn-skin( $bgColor:#e54028, $textColor:#fff, $startColor:#e8543f, $endColor:#d9331a, $btnA_BgGradientSwitch:false);
}

.#{$btnA_BaseClass}-block-highlight{
  @extend %btn-basic;
  @include btn-size-block();
  @include btn-skin( $bgColor:#f18d05, $textColor:#fff, $startColor:#fa9915, $endColor:#d87e04);
}

